<template>
  <q-card>
    <q-card-section>
      <div class="text-h6">Enter Details</div>
      <div class="row">
        <div class="col-4 fal">
          <q-item-label>Stock Code:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.stock_code"
            use-input
            :dense="true"
            :options="SCoptions"
            @filter="filterFn"
            lazy-rules
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> No results </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>

        <div class="col-4 fal">
          <q-item-label>Serial No:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-input filled v-model="form.serial_no" :dense="true" lazy-rules />
        </div>

        <div class="col-4 fal">
          <q-item-label>System:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.system"
            :options="sysOptions"
            stack-label
            :dense="true"
            lazy-rules
          />
        </div>

        <div class="col-4 fal">
          <q-item-label>Short Description:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-input filled v-model="form.description" :dense="true" lazy-rules />
        </div>

        <div class="col-4 fal">
          <q-item-label>Description:</q-item-label>
        </div>
        <div class="col-8 q-pa-sm">
          <div style="max-width: 300px">
            <q-input v-model="form.description" filled type="textarea" />
          </div>
        </div>

        <div class="col-4 fal">
          <q-item-label>Date Code:</q-item-label>
        </div>
        <div class="col-8 q-pa-sm">
          <div style="max-width: 300px">
            <q-input filled v-model="form.date_code" mask="date" :rules="['date']">
              <template v-slot:append>
                <q-icon name="event" class="cursor-pointer">
                  <q-popup-proxy cover transition-show="scale" transition-hide="scale">
                    <q-date v-model="date">
                      <div class="row items-center justify-end">
                        <q-btn v-close-popup label="Close" color="primary" flat />
                      </div>
                    </q-date>
                  </q-popup-proxy>
                </q-icon>
              </template>
            </q-input>
          </div>
        </div>

        <div class="col-4 fal">
          <q-item-label>S/W Version:</q-item-label>
        </div>
        <div class="col-8 q-pa-sm">
          <q-input filled v-model="form.sw_ver" :dense="true" />
        </div>

        <div class="col-4 fal">
          <q-item-label>H/W Version:</q-item-label>
        </div>
        <div class="col-8 q-pa-sm">
          <q-input filled v-model="form.hw_ver" :dense="true" />
        </div>
      </div>
    </q-card-section>

    <q-card-section>
      <div class="text-h6">Asset Hierarchy</div>
      <div class="row">
        <div class="col-4 fal">
          <q-item-label>Equipment Class:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.equipmentClass"
            use-input
            :dense="true"
            :options="EpOptions"
            @filter="filterFn"
            lazy-rules
          >
            <template v-slot:no-option>
              <q-item>
                <q-item-section class="text-grey"> No results </q-item-section>
              </q-item>
            </template>
          </q-select>
        </div>

        <div class="col-4 fal">
          <q-item-label>Level 1:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.lv1"
            :options="lv1Options"
            stack-label
            :dense="true"
            lazy-rules
          />
        </div>

        <div class="col-4 fal">
          <q-item-label>Level 2:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.lv2"
            :options="lv2Options"
            stack-label
            :dense="true"
            lazy-rules
          />
        </div>

        <div class="col-4 fal">
          <q-item-label>Level 3:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.lv3"
            :options="lv3Options"
            stack-label
            :dense="true"
            lazy-rules
          />
        </div>

        <div class="col-4 fal">
          <q-item-label>Level 4:</q-item-label><span style="color: red">*</span>
        </div>
        <div class="col-8 q-pa-sm">
          <q-select
            filled
            v-model="form.lv4"
            :options="lv4Options"
            stack-label
            :dense="true"
            lazy-rules
          />
        </div>

        <div class="col-4 fal" v-if="props.level == 'level 5'">
          <q-item-label>Level 5:</q-item-label>
        </div>
        <div class="col-8 q-pa-sm" v-if="props.level == 'level 5'">
          <q-select filled v-model="form.lv5" :options="lv5Options" stack-label :dense="true" />
        </div>
      </div>
    </q-card-section>
  </q-card>
  
</template>

<script setup lang="ts">
import { DetailFormType } from 'src/services/type'
import { ref, reactive } from 'vue'

const props = defineProps<{
  level: string
}>()

console.log(props.level)

const form:DetailFormType = reactive({
  stock_code: '',
  serial_no: '',
  system: '',
  detail_description: '',
  description: '',
  date_code: '',
  sw_ver: '',
  hw_ver: '',
  equipmentClass: '',
  lv1: '',
  lv2: '',
  lv3: '',
  lv4: '',
  lv5: '',
  parent_part_stock_code: '',
  parent_part_serial_number:''
})

defineExpose({form})

const date = ref('')

const stockCodeOptions = [
  'stockCodeOptions',
  'stockCodeOptions',
  'stockCodeOptions',
  'stockCodeOptions',
  'stockCodeOptions'
]
const sysOptions = ['sysOptions', 'sysOptions', 'sysOptions', 'sysOptions', 'sysOptions']

const eqClassOptions = ['EpOptions', 'EpOptions', 'EpOptions', 'EpOptions', 'EpOptions']
const SCoptions = ref(stockCodeOptions)
const EpOptions = ref(eqClassOptions)

const lv1Options = ['lv1Options']
const lv2Options = ['lv2Options']
const lv3Options = ['lv3Options']
const lv4Options = ['lv4Options']
const lv5Options = ['lv5Options']

function filterFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      SCoptions.value = stockCodeOptions
      EpOptions.value = eqClassOptions

      // here you have access to "ref" which
      // is the Vue reference of the QSelect
    })
    return
  }

  update(() => {
    const needle = val.toLowerCase()
    SCoptions.value = stockCodeOptions.filter((v) => v.toLowerCase().indexOf(needle) > -1)
    EpOptions.value = eqClassOptions.filter((v) => v.toLowerCase().indexOf(needle) > -1)
  })
}
</script>

<style scoped>

</style>
